<template>
	<view class="beijingse">
		<header-top :messageInfo="{typeFlag:true,message:'我的团队',liner:false}"></header-top>
		<view class="neirong">
			<view class="block1">
				<view class="baisetext2">总收益</view>
				<view class="flexbetween margin_top2">
					<view class="baisetext">{{yonghuxx.total_commsion_price}}</view>
					<view class="tixian2" @click="tzsymx">
						<view class="flexleft">
							<view class="baisetext3 margin_right1">收益明细</view>
							<view class="baijiantou"></view>
						</view>
					</view>
				</view>
				<view class="flexleft">
					<view class="baisetext3 margin_right4">团队人数：：{{yonghuxx.team_num}}</view>
					<view class="baisetext3 ">累计订单数：{{yonghuxx.total_commsion_num}}</view>
				</view>
			</view>
			<view class="mainpadding">
				<view class="block2 ffffff radius shadow mainpadding">
					<view class="flexleft">
						<view class="flexcenter sanshi">
							<view class="">
								<view class="huisetext textcenter">今日收益</view>
								<view class="titletext textcenter">{{yonghuxx.today_commsion_price}}</view>
							</view>
						</view>
						<view class="flexcenter sanshi">
							<view class="">
								<view class="huisetext textcenter">昨日收益</view>
								<view class="titletext textcenter">{{yonghuxx.yesterday_commsion_price}}</view>
							</view>
						</view>
						<view class="flexcenter sanshi">
							<view class="">
								<view class="huisetext textcenter">本月收益</view>
								<view class="titletext textcenter">{{yonghuxx.mouth_commsion_price}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="block3">
					<view class="dingwei">
						<view class="titletext">团队成员</view>
						<view class="zibrijt"></view>
					</view>
					<view class="margin_top ffffff radius mainpadding" v-for="item in list.data" :key="item.id">
						<view class="flexleft">
							<view class="shilitu margin_right2">
								<image :src="item.avatar_text" mode=""></image>
							</view>
							<view class="">
								<view class="titletext">{{item.nickname}}</view>
								<view class="huisetext margin_top1">{{item.mobile}}</view>
								<view class="huisetext margin_top1">{{item.rec_time_text}}</view>
							</view>
						</view>
						<view class="mainpadding shouybox margin_top2">
							<view class="flexleft">
								<view class="notitletext">贡献收益：
									<text class="hstext">￥{{item.order_price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				yonghuxx: {},
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onShow() {
			this.userinfor()
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				httpRequest.request('api/user/myTeam', 'POST', {
					page: page || 1,
					limit: _this.limit,
					orderby: this.orderby,
					keywords: this.keywords
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						res.data.data.forEach(item => {
							Object.assign(item, {
								show: false
							})
						})
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 用户信息
			userinfor() {
				httpRequest.request('api/user/index', 'POST', {
					// 传参
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.yonghuxx = res.data
					}
				})
			},
			// 跳转收益明细
			tzsymx(){
				uni.navigateTo({
					url:'/pages/mypage/shouyimx'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zibrijt {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 127rpx;
		height: 10rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/yemx.png');
	}
	.block3 {
		position: relative;
		top: -80rpx;
	}

	.shanghuax {
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		padding-top: 30rpx;
	}

	.chengsetext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #EF8933;
	}

	.huisetextbig {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.hstext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.shouybox {
		background: #F1F1F1;
		border-radius: 10rpx;
	}

	.huisetext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.shilitu {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.block2 {
		position: relative;
		top: -110rpx;
	}

	.sanshi {
		width: 33.33%;
	}

	.neirong {
		position: relative;
		top: -40rpx;
	}

	.baijiantou {
		width: 8rpx;
		height: 16rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/baijiantou.png');
	}

	.block1 {
		padding: 82rpx 0 148rpx 30rpx;
		background-color: #fa5f4c;
	}

	.baisetext3 {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}


	.tixian2 {
		width: 159rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/touming.png');
	}

	.baisetext {
		font-size: 68rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FFFFFF;
	}

	.baisetext2 {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
